<template>
  <el-dialog
    :visible.sync="options.visible"
    custom-class="myDialog">
    <div slot="title" class="dialogTitleBar">{{options.title}}</div>
    <slot name="dialogContent" ref="dialogContent"></slot>
    <div slot="footer" ref="dialogFooter"></div>
  </el-dialog>
</template>

<script>
  export default {
    props: ["options"],
    name:"dialog",
    components :{
    },
    data () {
      return {

      }
    },
    mounted: function () {
    },
    methods: {
      getRefs (refName) {
        if(this.$refs[refName])
          return this.$refs[refName][0]
        else
          throw new Error(`the control ${refName} is undefined !`)
      }
    }
  }
</script>

<style>
  .myDialog .dialogTitleBar{
    background-color: #2cace2;
    line-height: 36px;
    color:#fff;
    font-size: 1.6rem;
    text-align: center;
  }
  .myDialog .el-dialog__header{
    padding: 0;
  }
  .myDialog .el-dialog__headerbtn{
    top: 7px;
  }
  .myDialog .el-dialog__headerbtn .el-dialog__close{
    color:#fff;
  }
  .myDialog .el-dialog__footer{
    padding: 0;
  }
</style>
